<script>
import {mapActions, mapState} from "vuex";
import ListContainer from "@/views/Home/ListContainer/ListContainer.vue";
import Recommend from "@/views/Home/Recommend/Recommend.vue";
import Rank from "@/views/Home/Rank/Rank.vue";
import Link from "@/views/Home/Link/Link.vue";
import Floor from "@/views/Home/Floor/Floor.vue";
import Brand from "@/views/Home/Brand/Brand.vue";

export default {
  name: "Home",
  methods: {
    /* 使用mapActions将homseStore模块下的actions映射为组件实例的方法 */
    ...mapActions("homeStore", ["fetchFloorList"]),
    ...mapActions("userStore", ["fetchUserInfo"]),

  },
  computed: {
    /* 使用mapState将homseStore模块下的state映射为组件实例的属性 */
    ...mapState("homeStore", ["floorList"])
  },
  mounted() {
    /* 组件挂载完毕调用fetchFloorList()派发action获取楼层的数据 */
    this.fetchFloorList()
    /* 组件挂载完毕调用fetchUserInfo()派发action获取用户信息 */
    // this.fetchUserInfo().catch(e => e)
  },
  components: {
    Brand,
    Floor,
    Link,
    Rank,
    Recommend,
    ListContainer
  },

}
</script>

<template>
  <div class="home">
    <!--三级联动-->
    <TabNav></TabNav>
    <!--轮播图区域-->
    <ListContainer></ListContainer>
    <!--今日推荐-->
    <Recommend></Recommend>
    <!--商品排行-->
    <Rank></Rank>
    <!--猜你喜欢-->
    <Link></Link>
    <!--楼层-->
    <Floor v-for="(item,index) in floorList" :key="index" :floor="item"></Floor>
    <!--品牌商标-->
    <Brand></Brand>
  </div>
</template>

<style scoped lang="less">

</style>
